<template>
  <el-container>
    <el-aside width="200px" class="sidebar-container">
      <el-menu
        :default-active="$route.path"
        class="sidebar-menu"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
        router>
        
        <!-- 服务管理 -->
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-s-tools"></i>
            <span>服务管理</span>
          </template>
          <el-menu-item index="/serviceItems">服务项目</el-menu-item>
          <el-menu-item index="/careLevels">护理等级</el-menu-item>
          <el-menu-item index="/serviceReservations">服务预定</el-menu-item>
        </el-submenu>

        <!-- 其他菜单项可以继续添加 -->
      </el-menu>
    </el-aside>

    <el-container>
      <el-header>
        <h1>服务管理</h1>
      </el-header>
      <el-main>
        <div class="service-content">
          <!-- 服务项目 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>服务项目</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="handleServiceItems">查看详情</el-button>
            </div>
            <div class="text-center">
              <i class="el-icon-s-operation" style="font-size: 48px; color: #409EFF;"></i>
              <h2>10</h2>
              <p>当前服务项目</p>
            </div>
          </el-card>

          <!-- 护理等级 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>护理等级</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="handleCareLevels">查看详情</el-button>
            </div>
            <div class="text-center">
              <i class="el-icon-s-custom" style="font-size: 48px; color: #67C23A;"></i>
              <h2>5</h2>
              <p>护理等级种类</p>
            </div>
          </el-card>

          <!-- 服务预定 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>服务预定</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="handleServiceReservations">查看详情</el-button>
            </div>
            <div class="text-center">
              <i class="el-icon-s-order" style="font-size: 48px; color: #E6A23C;"></i>
              <h2>20</h2>
              <p>今日预定数量</p>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'ServiceManagement',
  methods: {
    handleServiceItems() {
      this.$message.success('服务项目详情功能待实现')
    },
    handleCareLevels() {
      this.$message.success('护理等级详情功能待实现')
    },
    handleServiceReservations() {
      this.$message.success('服务预定详情功能待实现')
    }
  }
}
</script>

<style scoped>
.sidebar-container {
  background-color: #304156;
}

.service-content {
  padding: 20px;
  display: flex;
  justify-content: space-around;
}

.box-card {
  width: 30%;
}

.text-center {
  text-align: center;
  margin-top: 20px;
}
</style> 